<template>
  <div class="container mx-auto px-4 py-8">
    <div class="max-w-6xl mx-auto space-y-8">
      <!-- 错误信息列表卡片 -->
      <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <div class="p-2 bg-blue-50 rounded-lg">
              <AlertCircle class="h-6 w-6 text-blue-500" />
            </div>
            <h2 class="text-xl font-semibold text-gray-800 ml-3">错误信息列表</h2>
          </div>
          
          <!-- 搜索框 -->
          <div class="flex items-center">
            <div class="relative">
              <input
                v-model="searchKeyword"
                type="text"
                placeholder="请输入错误代码或信息"
                class="pl-4 pr-10 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-64"
                @keyup.enter="handleSearch"
              >
              <button 
                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-500"
                @click="handleSearch"
              >
                <Search class="h-5 w-5" />
              </button>
            </div>
          </div>
        </div>

        <!-- 使用 TableDetails 组件 -->
        <TableDetails
          :data="errorList"
          :columns="tableColumns"
          :loading="loading"
          title="4gl错误信息"
          :show-buttons="false"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AlertCircle, Search } from 'lucide-vue-next'
import { errorCodeApi } from '@/api/modules/errorCode'
import { ElMessage } from 'element-plus'
import TableDetails from '@/components/common/TableDetails.vue'

const errorList = ref([])
const loading = ref(false)
const searchKeyword = ref('')

// 定义表格列配置
const tableColumns = [
  {
    prop: 'error_code',
    label: '错误代码',
    minWidth: '120px',
    wrap: false
  },
  {
    prop: 'error_message',
    label: '错误信息',
    minWidth: '400px',
    wrap: true
  }
]

const fetchErrorMessages = async () => {
  loading.value = true
  try {
    const response = await errorCodeApi.getErrorList()
    if (response.data.code === 200) {
      errorList.value = response.data.data
    } else {
      ElMessage.error('获取数据失败')
    }
  } catch (error) {
    ElMessage.error('获取数据失败：' + error.message)
  } finally {
    loading.value = false
  }
}

const handleSearch = async () => {
  if (!searchKeyword.value.trim()) {
    return fetchErrorMessages()
  }
  
  loading.value = true
  try {
    const response = await errorCodeApi.searchError(searchKeyword.value)
    if (response.data.code === 200) {
      errorList.value = response.data.data
    }
  } catch (error) {
    ElMessage.error('搜索失败：' + error.message)
  } finally {
    loading.value = false
  }
}

// 初始化加载数据
fetchErrorMessages()
</script> 